<template>
  <div>
    <div class="perOffice-container">
      <page-title icon="volume-o" :border="true" title="公告" :line-url="`/perOffice/notice`" />
      <div class="perOffice-group">
        <van-cell :value="item.createtime | dateFrom" v-for="(item,index) in noteList" is-link :key="index" @click="$router.push({path:'/perOffice/noticeDetail',query:{id:item.id}})">
          <template #title>
            <van-tag type="danger">置顶</van-tag>
            <span class="custom-title">{{item.title}}</span>
          </template>
        </van-cell>
      </div>
      <page-title icon="volume-o" title="使用教程" :show-more="false" />
      <van-row>
        <van-col span="6" style="padding: 10px;" v-for="(item,index) in navList.courseList" @click="$router.push(item.url)" :key="index">
          <div class="nav-icon iconfont" :class="item.icon" :style="{backgroundColor:item.bg}"></div>
          <div class="nav-text">{{item.name}}</div>
        </van-col>
      </van-row>
      <page-title icon="volume-o" title="区域管理" :show-more="false" v-if="role_file == 1" />
      <van-row v-if="role_file == 1">
        <van-col span="6" style="padding: 10px;" v-for="(item,index) in navList.areaList" @click="$router.push(item.url)" :key="index">
          <div class="nav-icon iconfont" :class="item.icon" :style="{backgroundColor:item.bg}"></div>
          <div class="nav-text">{{item.name}}</div>
        </van-col>
      </van-row>
      <page-title icon="volume-o" title="我的数据" :show-more="false" />
      <van-row>
        <van-col span="6" style="padding: 10px;" v-for="(item,index) in navList.dataList" @click="$router.push(item.url)" :key="index">
          <div class="nav-icon iconfont" :class="item.icon" :style="{backgroundColor:item.bg}"></div>
          <div class="nav-text">{{item.name}}</div>
        </van-col>
      </van-row>
    </div>
    <footers />
  </div>
</template>
  <script>
import { Icon, Toast, Cell, Tag, Col, Row } from 'vant';
import pageTitle from '@/components/title/Title.vue';
import utils from '@/utils/utils';
export default {
  components: {
    pageTitle,
    [Icon.name]: Icon, [Cell.name]: Cell,
    [Tag.name]: Tag, [Col.name]: Col,
    [Row.name]: Row
  },
  data() {
    return {
      role_file: 0,
      role_agent: 0,
      navList: {
        courseList: [
          { name: '绑定家长', url: "/perOffice/parrent", icon: "icon-daibangdingjiachang", bg: "#FF9900" },
          { name: '图文教程', url: "/perOffice/imgOrText", icon: "icon-tuwenjiaocheng", bg: "#FF9900" }
        ],
        areaList: [
          { name: '销售总报', url: "/perOffice/saleTotal", icon: "icon-suoyoujixiaotibao-", bg: "#99CCCC" },
          { name: '销售分报', url: "/perOffice/saleBranch", icon: "icon-icon-fenxi", bg: "#99CCCC" },
          { name: '绑定数量', url: "/perOffice/bindUsers", icon: "icon-dangqianzhongduanbangdingshuliang", bg: "#99CCCC" },
          { name: '用户信息', url: "/perOffice/userInfo", icon: "icon-yonghuxinxi-", bg: "#99CCCC" },
        ],
        dataList: [
          { name: '业绩统计', url: "/perOffice/achievement", icon: "icon-yejitongji1", bg: "#6699CC" },
          { name: '家长统计', url: "/perOffice/countParrent", icon: "icon-yejitongji", bg: "#6699CC" },
          { name: '我的家长', url: "/perOffice/myParrent", icon: "icon-wodejiachang", bg: "#6699CC" },
          { name: '家长订单', url: "/perOffice/order", icon: "icon-wodedingdan", bg: "#6699CC" },
        ]
      },
      noteList: [],
      teachers: []
    };
  },
  filters: {
    dateFrom(e) {
      if (!e) return '';
      return utils.dateFormat(e, null, true);
    }
  },
  created() {
    this.initAjaxMethod()
  },
  methods: {
    initAjaxMethod() {
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.SET_PEROFFICE_INDEX)
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            this.noteList = Array.isArray(res.not_list) ? res.not_list : [];
            this.role_file = res.role_file || 0;
            this.role_agent = res.role_agent || 0;
          }
        });
    },
  }
};
  </script>
  
  <style lang="less">
.perOffice-container {
  background: #fff;
  overflow: hidden;
  .perOffice-group {
    background: #fff;
  }
  .van-cell__title {
    display: flex;
    align-items: center;
  }
  .custom-title {
    padding-left: 0.1rem;
  }
  .custom-title,
  .van-cell__value {
    font-size: 0.3rem;
  }
  .nav-icon {
    height: 1.2rem;
    text-align: center;
    line-height: 1.2rem;
    border-radius: 0.2rem;
    color: #fff;
    font-size: 0.6rem;
  }
  .nav-text {
    margin-top: 0.2rem;
    font-size: 0.3rem;
    text-align: center;
  }
  .teach-group {
    padding: 0.2rem;
  }
  .teach-box {
    padding: 0.2rem;
    display: flex;
    align-items: center;
    background: #ffcc99;
    border-radius: 0.2rem;
  }
  .teach-box img {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
  }
  .teach-title {
    margin-left: 0.2rem;
    font-size: 0.3rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 85%;
  }
}
</style>
  